<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie==edge">
    <title>我的</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <script src="js/mian.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
</head>
<body>
<div class="user">
    <!--back模块-->
    <div class="back">
    </div>
    <div class="user-info">
        <div class="tou">
            <img src="images/tou.png" alt="">
        </div>
        <div class="username">
            <p>splendid</p>
            <p>hqsong@mial.ustc.edu.cn</p>
        </div>
        <div class="list">
            <ul>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-message.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">我的消息</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-menber.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">会员中心</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-listen.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">听歌识曲</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-info.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">桌面歌词</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-liuliang.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">流量播放</p>
                </span>
                        <span class="point">
 <i class="fa fa-angle-right"></i>

                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-time.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">定时播放</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                    <span class="ico">
                    <img src="images/pic-suggestion.png" alt="">
                    </span>
                        <span class="text">
                    <p class="title">意见反馈</p>
                </span>
                        <span class="point">
                   <i class="fa fa-angle-right"></i>
                </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="content2">

</div>
<!--导航栏模块-->
<nav>
<span class="menu">

</span>
    <div class="dao">
        <ul>
            <li><a href="#" class="current">我的</a></li>
            <li><a href="#">推荐</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">故事</a></li>
        </ul>
    </div>
    <div class="search"></div>
</nav>
<!--我的-->
<div class="main-block content">

    <!--本地模块-->
    <div class="my-music">
        <ul>
            <li>
                <a href="#">
               <span>
                <i class="fa fa-folder-open-o" style="color: #bf3c65 !important;"></i>
            </span>
                    <p>本地音乐</p>
                    <div class="count">
                        <span>16首</span>
                        <i class="clearfix fa fa-angle-right"></i>
                    </div>

                </a>
                <hr>
            </li>
            <li>
                <a href="#">
               <span>
                <i class="fa fa-play-circle-o" style="color: #a69328 !important;"></i>
            </span>
                    <p>最近播放</p>
                    <div class="count">
                        <span>28首</span>
                        <i class="clearfix fa fa-angle-right"></i>
                    </div>

                </a>
                <hr>
            </li>
            <li>
                <a href="#">
               <span>
                <i class="fa fa-cloud-download" style="color: #e160e9 !important;"></i>
            </span>
                    <p>我的下载</p>
                    <div class="count">
                        <span>54首</span>
                        <i class="clearfix fa fa-angle-right"></i>
                    </div>

                </a>
                <hr>
            </li>
            <li>
                <a href="#">
               <span>
                <i class="fa fa-user-o" style="color: #6fcafe !important;"></i>
            </span>
                    <p>我的收藏</p>
                    <div class="count">
                        <span>21个</span>
                        <i class="clearfix fa fa-angle-right"></i>
                    </div>

                </a>
                <hr class="none">
            </li>
        </ul>
    </div>
    <!--歌单模块-->
    <div class="my-list">
        <div class="header">
    <span class="my">
        我 的 歌 单 6
    </span>
            <span class="hide"><p>收藏歌单12</p></span>
            <div class="right">
                <span class="add"></span>
                <span class="menu"></span>
            </div>
        </div>
        <ul>
            <li>
                <a href="#">
               <span>
                <img src="images/mylove.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">我喜欢的音乐</p>
                    <p class="total">108首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
            <li>
                <a href="#">
               <span>
                <img src="images/yuyinniaoniao.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">余音袅袅</p>
                    <p class="total">32首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
            <li>
                <a href="#">
               <span>
                <img src="images/slient.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">Slient</p>
                    <p class="total">26首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
            <li>
                <a href="#">
               <span>
                <img src="images/softmusic.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">纯音乐</p>
                    <p class="total">69首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
            <li>
                <a href="#">
               <span>
                <img src="images/night.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">晚安</p>
                    <p class="total">72首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
            <li>
                <a href="#">
               <span>
                <img src="images/south.png" alt="">
            </span>
                    <span class="text">
                    <p class="title">水墨江南</p>
                    <p class="total">26首</p>
                </span>

                    <span class="point">
                    <img src="images/point.png" alt="">
                </span>

                </a>

            </li>
        </ul>
    </div>

</div>

<!--推荐-->
<div class="main-block suggest">
    <!--    轮播图-->
    <div class="suggest-header">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/luobo-3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/body-img1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/luobo-1.png" alt="">
                </div>
                <!--            <div class="swiper-slide">Slide 4</div>-->
                <!--            <div class="swiper-slide">Slide 5</div>-->
                <!--            <div class="swiper-slide">Slide 6</div>-->
                <!--            <div class="swiper-slide">Slide 7</div>-->
                <!--            <div class="swiper-slide">Slide 8</div>-->
                <!--            <div class="swiper-slide">Slide 9</div>-->
                <!--            <div class="swiper-slide">Slide 10</div>-->
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <script>

            var swiper = new Swiper('.swiper-container', {
                autoplay: {
                    stopOnLastSlide: false,
                },
                slidesPerView: 1.4,
                spaceBetween: -100,
                centeredSlides: true,
                loop: true,
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
            });
        </script>
    </div>
    <!--    推荐板块-->
    <div class="suggest-body">
        <div class="title">
                <span class="tuijian">
                    <p>推荐歌单</p>
                </span>
            <span class="more">
                    <p>更多></p>
                </span>
        </div>
        <div class="bg">
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijian-1.png" alt="">
                </div>
                <p>华语速爆新歌</p>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijian-2.png" alt="">
                </div>
                <p>专供|T台魅影，秀场律动。</p>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijain-3.png" alt="">
                </div>
                <p>YouTuBe最受欢迎的top100</p>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijian-4.png" alt="">
                </div>
                <p>怀旧篇|念旧的人活得总像个拾荒者</p>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijian-5.png" alt="">
                </div>
                <p>怀旧|闲暇细数90后的回忆杀</p>
            </div>
            <div class="box">
                <div class="box-img">
                    <img src="images/tuijian-6.png" alt="">
                </div>
                <p>金州勇士与史蒂芬库里的战歌</p>
            </div>
        </div>
    </div>
    <!--    榜单-->
    <div class="suggest-bangdan">
        <div class="title">
                <span class="tuijian">
                    <p>流行榜单</p>
                </span>
            <span class="more">
                    <p>更多></p>
                </span>
        </div>
        <div class="bg">
            <div class="box">
                <div class="music-title">
                    <p>简律 <br>
                        热歌榜</p>
                </div>
                <div class="play-i">
                    <i class="fa fa-play-circle-o"></i>
                </div>
                <div class="bangdan">
                    <div class="demo">
                        <p>1.相思</p>
                        <p class="ti">毛阿敏</p>
                    </div>
                    <div class="demo">
                        <p>2.绿色</p>
                        <p class="ti">陈雪凝</p>
                    </div>
                    <div class="demo">
                        <p>3.烟火里的尘埃</p>
                        <p class="ti">华晨宇</p>
                    </div>
                    <div class="demo">
                        <p>4.起风了</p>
                        <p class="ti">买辣椒也用卷</p>
                    </div>
                    <div class="demo">
                        <p>5.年少有为</p>
                        <p class="ti">毛阿敏</p>
                    </div>
                    <div class="demo">
                        <p>6.偏爱</p>
                        <p class="ti">张芸京</p>
                    </div>

                </div>
            </div>
            <div class="box">
                <div class="music-title">
                    <p>简律 <br>
                        新歌榜</p>
                </div>
                <div class="play-i">
                    <i class="fa fa-play-circle-o"></i>
                </div>
                <div class="bangdan">
                    <div class="demo">
                        <p>1.你曾是少年</p>
                        <p class="ti">焦迈奇</p>
                    </div>
                    <div class="demo">
                        <p>2.孤身</p>
                        <p class="ti">徐秉龙</p>
                    </div>
                    <div class="demo">
                        <p>3.云一定知道</p>
                        <p class="ti">王稀</p>
                    </div>
                    <div class="demo">
                        <p>4.春天在哪里</p>
                        <p class="ti">王俊凯</p>
                    </div>
                    <div class="demo">
                        <p>5.灰姑娘</p>
                        <p class="ti">陈雪凝</p>
                    </div>
                    <div class="demo">
                        <p>6.童话镇</p>
                        <p class="ti">陈一发</p>
                    </div>

                </div>
            </div>
            <div class="box">
                <div class="music-title">
                    <p>简律
                        <br>说唱榜</p>
                </div>
                <div class="play-i">
                    <i class="fa fa-play-circle-o"></i>
                </div>
                <div class="bangdan">
                    <div class="demo">
                        <p>1.大碗宽面</p>
                        <p class="ti">吴亦凡</p>
                    </div>
                    <div class="demo">
                        <p>2.人生苦短</p>
                        <p class="ti">JSore</p>
                    </div>
                    <div class="demo">
                        <p>3.Lighting</p>
                        <p class="ti">李佳隆</p>
                    </div>
                    <div class="demo">
                        <p>4.不劳不获</p>
                        <p class="ti">黄子韬</p>
                    </div>
                    <div class="demo">
                        <p>5.说散就散</p>
                        <p class="ti">艾福杰尼</p>
                    </div>
                    <div class="demo">
                        <p>6.佛说</p>
                        <p class="ti">七星</p>
                    </div>

                </div>
            </div>
            <div class="box">
                <div class="music-title">
                    <p>简律
                        <br>MV榜</p>
                </div>
                <div class="play-i">
                    <i class="fa fa-play-circle-o"></i>
                </div>
                <div class="bangdan">
                    <div class="demo">
                        <p>1.Galway</p>
                        <p class="ti">Ed sheeran</p>
                    </div>
                    <div class="demo">
                        <p>2.Shape you</p>
                        <p class="ti">Ed sheeran</p>
                    </div>
                    <div class="demo">
                        <p>3.Take Me</p>
                        <p class="ti">迈克学</p>
                    </div>
                    <div class="demo">
                        <p>4.Fairy Tale</p>
                        <p class="ti">Michael</p>
                    </div>
                    <div class="demo">
                        <p>5.ThatGirl</p>
                        <p class="ti">Olly Murs</p>
                    </div>
                    <div class="demo">
                        <p>6.ThatBoy</p>
                        <p class="ti">Direction</p>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--    唱片-->
    <div class="suggest-changpian">
        <div class="title">
                <span class="tuijian">
                    <p>新碟首发</p>
                </span>
            <span class="more">
                    <p>更多></p>
                </span>
        </div>
        <div class="bg">
            <img src="images/changpian.png" alt="">
        </div>
    </div>
    <!--    热门歌手-->
    <div class="suggest-hot">
        <div class="title">
                <span class="tuijian">
                    <p>流行歌手</p>
                </span>
            <span class="more">
                    <p>更多></p>
                </span>
        </div>
        <div class="bg">
            <div class="box">
                <span>
                    <img src="images/hot-zhou.png" alt="">
                </span>
                <p>周杰伦</p>
            </div>
            <div class="box">
                <span>
                    <img src="images/hot-xusong.png" alt="">
                </span>
                <p>许嵩</p>
            </div>
            <div class="box">
                <span>
                    <img src="images/hot-chenyixun.png" alt="">
                </span>
                <p>陈奕迅</p>
            </div>
            <div class="box">
                <span>
                    <img src="images/hot-lironghao.png" alt="">
                </span>
                <p>李荣浩</p>
            </div>
            <div class="box">
                <span>
                    <img src="images/hot-cxn.png" alt="">
                </span>
                <p>陈雪凝</p>
            </div>
        </div>
    </div>
</div>
<!--视频-->
<div class="main-block video">
    <div class="box">
        <div class="box-header">
            <span class="user-img">
                <div class="userimg">
                    <img src="images/head-img1.png" alt="">
                </div>
            </span>
            <span class="username">
            <p>蔡依林</p>
            </span>
        </div>
        <div class="box-body">
            <p class="title">
                蔡依林-你也有今天|荒岛逃生化身‘复仇女王蜂’
            </p>
            <div class="video">
                <img src="images/body-img1.png" alt="">
                <div class="jindu">
                    <img src="images/jindu.png" alt="">
                </div>
            </div>

        </div>
        <div class="box-foot">
            <div class="video-button">
                <div class="buttonimg">
                </div>

            </div>
            <div class="video-scale">
                <i class="fa fa-chain"></i>
            </div>
            <div class="video-right-up">
                <div class="right-up">

                </div>

            </div>
            <div class="video-right-comment">
                <div class="right-comment">

                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box-header">
            <span class="user-img">
                <div class="userimg">
                    <img src="images/head-img2.png" alt="">
                </div>
            </span>
            <span class="username">
            <p>戒何以戒</p>
            </span>
        </div>
        <div class="box-body">
            <p class="title">
                还记得当年儿子坐在爸爸的自行车上的情景吗？
            </p>
            <div class="video">
                <img src="images/body-img2.png" alt="">
                <div class="jindu">
                    <img src="images/jindu.png" alt="">
                </div>
            </div>

        </div>
        <div class="box-foot">
            <div class="video-button">
                <div class="buttonimg">
                </div>

            </div>
            <div class="video-scale">
                <i class="fa fa-chain"></i>
            </div>
            <div class="video-right-up">
                <div class="right-up">

                </div>

            </div>
            <div class="video-right-comment">
                <div class="right-comment">

                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box-header">
            <span class="user-img">
                <div class="userimg">
                    <img src="images/head-img1.png" alt="">
                </div>
            </span>
            <span class="username">
            <p>蔡依林</p>
            </span>
        </div>
        <div class="box-body">
            <p class="title">
                蔡依林-你也有今天|荒岛逃生化身‘复仇女王蜂’
            </p>
            <div class="video">
                <img src="images/body-img1.png" alt="">
                <div class="jindu">
                    <img src="images/jindu.png" alt="">
                </div>
            </div>

        </div>
        <div class="box-foot">
            <div class="video-button">
                <div class="buttonimg">
                </div>

            </div>
            <div class="video-scale">
                <i class="fa fa-chain"></i>
            </div>
            <div class="video-right-up">
                <div class="right-up">

                </div>

            </div>
            <div class="video-right-comment">
                <div class="right-comment">

                </div>
            </div>
        </div>
    </div>

</div>

<!--故事-->
<div class="main-block story">
    <div class="story-head">
        <div class="story-head-img">
            <img src="images/story-head.png" alt="">
        </div>
    </div>
    <div class="story-bd">
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-1.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>李宗盛：做琴的刀，写歌的笔</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-1.png" alt="">
                        </span>
                        <p>解忧小食堂</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>
                        <p>1042</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-2.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>情不知所以，一往而情深；朝思暮想，幻想一生有你《明天过后》</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-2.png" alt="">
                        </span>
                        <p>牧云</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>
                        <p>1042</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-3.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>对你的心意，就像在薄薄的被子里玩手机，总有星光露出来</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-3.png" alt="">
                        </span>
                        <p>想做梦的梦</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>
                        <p>1544</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-4.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>你的存在对我来说就足够浪漫</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-4.png" alt="">
                        </span>
                        <p>代喝牛奶</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>
                        <p>1066</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-5.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>梅雨季节，望着窗外的你</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-5.png" alt="">
                        </span>
                        <p>解忧小食堂</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>
                        <p>1042</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部模块-->
<div class="play">
    <!--做出三角的缺口-->
    <div class="trangle">
    </div>
    <!--    播放按钮-->
    <div class="bofang">
        <span class="btu"> <img src="images/bofang.png" alt=""></span>

        <span class="info">
            <p class="name">清明雨上</p>
            <p class="author">--许嵩</p>
        </span>
    </div>
    <div class="player">
        <div class="btu1">
            <span>
                <div class="box">
                     <img src="images/prev.png" alt="">
                </div>

            </span>
            <span>  <div class="box">
                     <img src="images/next.png" alt="">
                </div></span>
        </div>
        <div class="btu2">
            <div class="menu">
                <img src="images/menuwhite.png" alt="">
            </div>

        </div>
        <div class="btu3">
            <div class="bofangtiao">

            </div>
        </div>
    </div>
</div>
</body>
</html>